import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:oss_upload/oss_upload.dart';
import 'package:richedit/data/image_entity.dart';
import 'package:richedit/loading_widget.dart';
import 'package:richedit/photo/photo_view_screen.dart';
import 'package:richedit/res/color.dart';

class ImageEdit extends StatefulWidget {
  ImageEntity data;

  ImageEdit(this.data);

  @override
  _ImageEditState createState() => _ImageEditState();
}

class _ImageEditState extends State<ImageEdit> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          showSelectPhoto(context).then((value) async {
            if (value != null) {
              LoadingWidget.showLoading(context);
              var file = await OSSUpload.uploadFile(value, "1", "1", "1");
              LoadingWidget.dismissLoading();
              if (file != null) {
                String fileUrl = file['url'];
                widget.data.url = fileUrl;
                setState(() {});
              }
            }
          });
        },
        child: Container(
          child: widget.data.url == null
              ? Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black12, width: 1),
                  ),
                  child: Image.asset("assets/images/ic_photo.png", package: "richedit",),
                )
              : Container(
                  padding: const EdgeInsets.all(1),
                  constraints: BoxConstraints(
                    maxHeight: 300,
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black12, width: 1),
                  ),
                  child: Image.network(widget.data.url!, fit: BoxFit.contain,),
                ),
        ),
      ),
    );
  }
}

class ImagePreview extends StatefulWidget {
  ImageEntity data;

  ImagePreview(this.data);

  @override
  _ImagePreviewState createState() => _ImagePreviewState();
}

class _ImagePreviewState extends State<ImagePreview> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            GestureDetector(
              onTap: (){
                PhotoViewScreen.open(context: context, photoUrl: widget.data.url!);
              },
              child: widget.data.imgScreenSize == "1"
                  ? Image.network(
                      widget.data.url??"",
                      fit: BoxFit.contain,
                    )
                  : Container(
                      constraints: BoxConstraints(
                        maxHeight: 300,
                      ),
                      child: Image.network(
                        widget.data.url??"",
                        fit: BoxFit.contain,
                      ),
                    ),
            ),
            widget.data.text != null && widget.data.text!.isNotEmpty
                ? Center(
                    child: Text(
                      widget.data.text??"",
                      style: TextStyle(fontSize: 13, color: Colour.text_3),
                    ),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }
}
///单选图片
Future<String?> showSelectPhoto(
    BuildContext context,
    ) async {
  // NavigatorUtils.unfocus();
  String type = await showSimpleBottomDialog(context, ["拍照", "选择照片"]);
  ImageSource source;
  if (type == "拍照") {
    source = ImageSource.camera;
  } else if (type == "选择照片") {
    source = ImageSource.gallery;
  } else {
    return null;
  }
  var image = await ImagePicker().getImage(source: source);
  if (image != null) {
    return image.path;
  } else {
    return null;
  }
}


///从底部弹出 带取消按钮 可自定义选项内容数量的dialog
Future<T?> showSimpleBottomDialog<T>(
    BuildContext context, List<String> titleList) {
  return showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(horizontal: 8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                color: Colors.white,
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: titleList.asMap().keys.map((e) {
                  return Container(
                    decoration: e == titleList.length - 1
                        ? null
                        : BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                width: 1, color: Colour.divider_1))),
                    height: 50,
                    child: InkWell(
                      onTap: () {
                        Navigator.of(context).pop(titleList[e]);
                      },
                      child: Center(
                        child: Text(
                          titleList[e],
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  );
                }).toList(),
//            children: titleList.map((e) {
//              return Container(
//                decoration: BoxDecoration(
//                  border: Border(bottom: BorderSide(width: 1, color: Colour.divider_1))
//                ),
//                height: 50,
//                child: InkWell(
//                  onTap: (){
//                    Navigator.of(context).pop(e);
//                  },
//                  child: Center(child: Text(e, style: TextStyle(fontSize: 16),),),
//                ),
//              );
//            }).toList(),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(3),
            ),
            GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Container(
                height: 50,
                width: double.infinity,
                margin: EdgeInsets.symmetric(horizontal: 8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16),
                  color: Colors.white,
                ),
                child: Center(
                  child: Text(
                    '取消',
                    style: TextStyle(fontSize: 16, color: Colour.text_3),
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(3),
            ),
          ],
        );
      });
}